<template>
	<view class="container">
		<view>
			
			<uni-card v-if="note.classify===100" style="background-color: palegreen;" :is-shadow="true" :is-full="true"
				@click="openNoteDetail">
				<text class="uni-body tow-line"><uni-icons :size="20" style="margin-right: 20upx;"
						:type="getIconType()"></uni-icons>{{note.title}}</text>
			</uni-card>

			<uni-card v-else-if="note.classify===110" :is-full="true">
				<image slot='cover' style="width: 100%;" :src="getImgUrl()"  @click="openNoteDetail"></image>
				<text class="uni-body">{{note.title}}</text>
				<view slot="actions" class="card-actions">
					<view class="card-actions-item">
						<uni-icons type="undo" size="18" color="#999"></uni-icons>
						<text class="card-actions-item-text">分享</text>
					</view>
					<view class="card-actions-item">
						<uni-icons type="heart" size="18" color="#999"></uni-icons>
						<text class="card-actions-item-text">点赞</text>
					</view>
					<view class="card-actions-item">
						<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
						<text class="card-actions-item-text">评论</text>
					</view>
				</view>
			</uni-card>
			<view v-else type="line" @click="openNoteDetail">
				<uni-card :border="true" spacing="10px" padding="0px" :title="note.title" extra="看详情" :is-shadow="true"
					:is-full="true">
					<text slot="title" class="tow-line"><uni-icons :size="20" style="margin-right: 20upx;"
							:type="getIconType()"></uni-icons>{{note.title}}</text>
				</uni-card>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		apiBaseUrl,
		fileBaseUrl
	} from '../../config/config'
	export default {
		props: {
			note: {
				type: null
			}
		},
		data() {
			return {
				tagStyle: {

					p: 'margin: 0px;'

				},
				avatar: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png',
				extraIcon: {
					color: '#4cd964',
					size: '22',
					type: 'gear-filled'
				}
			}
		},
		methods: {
			// 获取不同的图标类型
			getIconType() {
				
				let type = "flag-filled";
				if (this.note.classify === 100) {
					type = "spinner-cycle"
				} else if (this.note.classify === 109) {
					type = "star-filled"
				} else if (this.note.classify === 106) {
					type = "flag-filled"
				} else if (this.note.classify === 101) {
					type = "chat-filled"
				} else if (this.note.classify === 105) {
					type = "headphones"
				} else if (this.note.classify === 111) {
					type = "videocam-filled"
				} else if (this.note.classify === 107) {
					type = "folder-add-filled"
				} else if (this.note.classify === 108) {
					type = "link"
				} else if (this.note.classify === 110) {
					type = "image-filled"
				}
				return type;
			},
			//图片预览
			previewImg(imgUrl) {
				console.info("预览", imgUrl)
				uni.previewImage({
					current: 0,
					urls: [imgUrl]
				})
			},
			onClick(e) {
				console.log(e)
			},
			openNoteDetail(e) {
				console.info("打开详情")
				uni.navigateTo({
					url: '/pages/noteDetail/NoteDetail?noteId=' + this.note.id
				});
			},
			getImgUrl() {
				console.info(fileBaseUrl + this.note.content)
				return fileBaseUrl + this.note.content;
			},
			actionsClick(text) {
				uni.showToast({
					title: text,
					icon: 'none'
				})
			}
		}
	}
</script>

<style>
	.container {
		overflow: hidden;
	}

	.custom-cover {
		flex: 1;
		flex-direction: row;
		position: relative;
	}

	.cover-content {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 40px;
		background-color: rgba($color: #000000, $alpha: 0.4);
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 15px;
		font-size: 14px;
		color: #fff;
	}

	.card-actions {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		height: 45px;
		border-top: 1px #eee solid;
	}

	.card-actions-item {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.card-actions-item-text {
		font-size: 12px;
		color: #666;
		margin-left: 5px;
	}

	.cover-image {
		flex: 1;
		height: 150px;
	}

	.no-border {
		border-width: 0;
	}

	.tow-line {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	/deep/ .else-parse {}
</style>